<!--
*@Author: zt
*@Description: 应急资源
*@Date: 2024-08-16
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-collapsed-sider class="f-padding-6">
      <u-tree
        :treeData="treeData"
        ref="treeRef"
        :showSearch="false"
        :field-names="{
          title: 'text',
          key: 'id',
          children: 'children',
        }"
        v-model:expandedKeys="treeExpandes"
        @select="
          (keys, { selected: bool, selectedNodes, node, event }) => {
            searchF.model.fkRegionId = node['code'];
            getSearch(1, node);
          }
        "
      />
    </u-collapsed-sider>

    <a-layout class="f-h-100 s-bg-white">
      <u-table-header>
        <u-form
          :model="searchF"
          :gutter="16"
          :elements="searchEl"
          class="f-w-auto"
        >
          <a-col class="f-padding-b14">
            <a-space>
              <u-icon-button itype="view" @click="toEdit()">查看</u-icon-button>
            </a-space>
          </a-col>
          <a-col flex="1">
            <a-row justify="end">
              <a-space></a-space>
            </a-row>
          </a-col>
        </u-form>
      </u-table-header>
      <u-table-content class="f-h-100">
        <u-table
          :columns="columns"
          :data="tabData"
          rowKey="KEYID"
          v-model:pagination="pagenation"
          :scroll="{ y: 'calc(100vh - 296px)' }"
          :loading="loading"
          @onDblclick="record => toEdit(record)"
          @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
          @change="getSearch()"
        ></u-table>
      </u-table-content>
    </a-layout>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    :items="currentData"
    wrap-class-name="full-modal"
    :title="dialogTitle"
  />

  <!-- 导入 -->
  <u-imp-data v-model:open="showImp"></u-imp-data>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from 'vue';
import {
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import { ColProps, FormItemProps, TableColumnProps } from 'ant-design-vue';
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';
import { numberC } from '@/util/common';
import { formatAmt } from '@/util/format.ts'
import { cloneDeep } from 'lodash';
import { alertC } from '@/util/common';
import dayjs from 'dayjs';
import Edit from './Edit.vue';
import * as resourceServe from '@/service/resource/index';
import * as resourceServeTree from '@/service/resource/tree';

const route = useRoute();
const router = useRouter();
const tabSelData = ref([]);
const treeData = ref([]);
const treeExpandes = ref(['fda30684-6473-4fb5-8cdb-0d6001a7dd15']);

onMounted(() => {
  getTree();
});

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    fkRegionId: '',
  },
});
const formItemProps: FormItemProps = {
  labelCol: '72px',
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [];

// 列表
const loading = ref<boolean>(false);
const tabData = ref<any[]>([]);

let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'index',
    title: '序号',
    width: 50,
    align: 'center',
    customRender: ({ index }) => (index += 1),
  },
  { dataIndex: 'TEAM_NAME', title: '队伍名称', width: 150 },
  { dataIndex: 'TEAM_TYPE', title: '应急部队类别', width: 150 },
  { dataIndex: 'TEAM_SUBJECTION', title: '队伍隶属', width: 150 },
  { dataIndex: 'TEAM_NATURE', title: '队伍性质', width: 150 },
  {
    dataIndex: 'SETUP_TIME',
    title: '建队时间',
    width: 110,
    align: 'center',
    customRender: ({ text }) => {
      if (text) {
        return dayjs(text).format('YYYY-MM-DD');
      }
    },
  },
  { dataIndex: 'ABILITY_TYPE', title: '队伍能力类型', width: 150 },
  { dataIndex: 'TEAM_NUM', title: '队伍人数', width: 110, align: 'right' },
  { dataIndex: 'FULLTIME_NUM', title: '专职人数', width: 110, align: 'right' },
  { dataIndex: 'PARTTIME_NUM', title: '兼职人数', width: 110, align: 'right' },
  { dataIndex: 'ADDRESS', title: '地址', width: 150 },
  { dataIndex: 'LONGITUDE', title: '经度', width: 100, align: 'center' },
  { dataIndex: 'LATITUDE', title: '纬度', width: 100, align: 'center' },
  { dataIndex: 'RESPONSIBLE_NAME', title: '主要负责人姓名', width: 120 },
  {
    dataIndex: 'RESPONSIBLE_TEL',
    title: '联系电话',
    width: 110,
    align: 'center',
  },
  {
    dataIndex: 'RESPONSIBLE_EMAIL',
    title: '电子邮件',
    width: 110,
    align: 'center',
  },
  {
    dataIndex: 'EMERGENCY_NAME',
    title: '应急联系人姓名',
    width: 120,
    align: 'center',
  },
  {
    dataIndex: 'EMERGENCY_TEL',
    title: '应急联系电话',
    width: 120,
    align: 'center',
  },
  {
    dataIndex: 'EMERGENCY_TEL2',
    title: '应急联络电话2',
    width: 120,
    align: 'center',
  },
  {
    dataIndex: 'EMERGENCY_EMAIL',
    title: '应急电子邮件',
    width: 150,
    align: 'center',
  },
  { dataIndex: 'LEADER_NAME', title: '队长姓名', width: 120 },
  {
    dataIndex: 'LEADER_TEL',
    title: '队长移动电话',
    width: 120,
    align: 'center',
  },
  { dataIndex: 'LEADER_LINETEL', title: '队长固定电话', width: 150 },
  { dataIndex: 'POLITICAL_NAME', title: '政委姓名', width: 120 },
  {
    dataIndex: 'POLITICAL_TEL',
    title: '政委移动电话',
    width: 120,
    align: 'center',
  },
  {
    dataIndex: 'POLITICAL_LINETEL',
    title: '政委固定电话',
    width: 120,
    align: 'center',
  },
  { dataIndex: 'CHIEFENGINEER_NAME', title: '总工程师', width: 120 },
  {
    dataIndex: 'CHIEFENGINEER_TEL',
    title: '总工移动电话',
    width: 120,
    align: 'center',
  },
  {
    dataIndex: 'CHIEFENGINEER_LINETEL',
    title: '总工固定电话',
    width: 120,
    align: 'center',
  },
  { dataIndex: 'FAX_NUM', title: '传真号码', width: 120, align: 'center' },
  { dataIndex: 'CREATEUSER', title: '填报人', width: 120 },
  {
    dataIndex: 'CREATEUSER_TEL',
    title: '填报人联系方式',
    width: 120,
    align: 'center',
  },
  {
    dataIndex: 'RESCUE_NUM',
    title: '累计救援救灾次数',
    width: 200,
    align: 'right',
  },
  {
    dataIndex: 'RESCUE_USER_NUM',
    title: '累计救援救灾出动人数',
    width: 200,
    align: 'right',
  },
  {
    dataIndex: 'REPORT_NUM',
    title: '重要救援行动总结报告例数',
    width: 200,
    align: 'right',
  },
  {
    dataIndex: 'CULTIVATE_TIME',
    title: '队员平均培训时常（小时）',
    width: 200,
    align: 'right',
  },
  {
    dataIndex: 'CROSSREGION_NUM',
    title: '可跨区域机动人数（人）',
    width: 200,
    align: 'right',
  },
  {
    dataIndex: 'SELFSECURITY_TIME',
    title: '自我保障时间（小时）',
    width: 200,
    align: 'right',
  },
]);

onMounted(() => {
  getSearch();
});

// 侧边树形点击
const getSearch = (current?: number, node) => {
  if (current == 1) {
    pagenation.current = 1;
  }
  searchF.current = pagenation.current;
  searchF.size = pagenation.pageSize;
  loading.value = true;
  resourceServe
    .getTeams(searchF)
    .then(res => {
      loading.value = false;
      if (res.code == 0) {
        tabData.value = res.data.records || [];
        pagenation.total = res.data.total;
      }
    })
    .catch(() => (loading.value = false));
};

// 获取树形
const getTree = () => {
  treeData.value = resourceServeTree.tree[0].children;
};

// 编辑
let dialogTitle = ref<string>('应急资源队伍编辑');
let showEdit = ref<boolean>(false);
let currentData = ref({});

// type 1 新增、type 2 修改按钮
const toEdit = (record?: any) => {
  if (tabSelData.value.length != 1 && !record) {
    alertC('只能选择一条数据进行编辑！');
    return;
  }

  currentData.value = record ? record : tabSelData.value[0];
  showEdit.value = true;
};
// 导入
let showImp = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
